﻿@model Cosby.Models.StripeSet
@{
    ViewBag.Title = "Play";
}
<h2>
    Play around</h2>

    <p> Go ahead and create a background for yourself.</p>


<div id='playground'>
    <link href="@Url.Content("~/colorpicker/css/colorpicker.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/colorpicker/js/colorpicker.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/colorpicker/js/eye.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/colorpicker/js/utils.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/colorpicker/js/layout.js?ver=1.0.2")" type="text/javascript"></script>
    <style>
        #colorTable
        {
            width: 200px;
        }
        input[type='text'].widthbox
        {
            width: 70px;
        }
        input[type='text'].colorbox
        {
            width: 95px;
        }
    </style>
    <p>
        Direction of stripes:
        <select id='orient'>
            <option value="v">vertical</option>
            <option value="h">horizontal</option>
        </select></p>
    <p>
        Description of each stripe:</p>
    <table id='colorTable'>
        <thead>
            <tr>
                <th>
                    Width
                </th>
                <th>
                    Color
                </th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <input type='button' value='Add stripe' onclick='addRow()' />
    <br />
    <input type='button' value='GO' onclick='createStripes()' />
</div>
<h2>
    Resulting url</h2>
<input type='text' id='result' />
<p>
    With css:</p>
<input type='text' id='cssResult' value='background-image:  url(/Image/Stripes/V/20/222/1/666);' />
<span id='preview'></span><span id='permalink'></span>
<script type="text/javascript">
    $(document).ready(function () {

@foreach (var r in Model.Stripes)
{ 
        <text>
        addRow("@r.Width", "@r.ColorString");
        </text>
}
        createStripes();
    });

    function createStripes() {
        var inps, res, imageHtml, orientation, length;
        inps = $('td input:text');

        res = $('#orient').val();

        for (i = 0; i < inps.length; i = i + 1) {
            res += "/" + $(inps[i]).val();
        }
        $('#result').val("/Image/Stripes/" + res);
        $('#cssResult').val('background-image:url(/Image/Stripes/' + res + ');');
        $('body').css("background", "url(/Image/Stripes/" + res + ")")
        $('#permalink').html("<p>Permalink to this page: <a href='/Home/Play/" + res + "'>/Home/Play/" +  res + "</a></p>");

        //work out how big the preview image should be...
        inps = $('.widthbox');
        length = 0;
        for (i = 0; i < inps.length; i = i + 1) {
            length += parseInt($(inps[i]).val());
        }
        
        imageHtml = '<p>Preview: (right click to save)</p><img src="/Image/Stripes/' + res + '" height=' + length + ' width=' + length + ' />';
        

        

        $('#preview').html(imageHtml);

    }
    function addRow(width, color) {

        width = width || "10";
        color = color || "8c3f8c";
        var newRowNum, row;

        newRowNum = $('#colorTable tr').length - 1;

        row = " <tr> <td> <input type='text' class='widthbox' value='" + width + "' /> </td> <td> <input type='text' class='colorbox' value='" + color + "'/> </td> <td> <input type='button' value='-' onclick='removeRow(this)' /> </td> </tr>";

        //hat-tip http://stackoverflow.com/questions/171027/add-table-row-in-jquery/171049#171049
        $('#colorTable tr:last').after(row);
        SetIt(newRowNum);
        createStripes();

    }

    function removeRow(self) {
        //remove the row.
        $(self).closest('tr').remove();
        createStripes();
    }

    function SetIt(rowNum) {
        $('.colorbox').ColorPicker({
            onSubmit: function (hsb, hex, rgb, el) {
                $(el).val(hex);
                $(el).ColorPickerHide();
            },
            onBeforeShow: function () {
                $(this).ColorPickerSetColor(this.value);
            }
        })
    .bind('keyup', function () {
        $(this).ColorPickerSetColor(this.value);
    });
    }

    
</script>
